<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生成动态表项</title>
  <style>
    li{
      font-weight: bolder;
    }
    span{
      color: red;
      font-size: 5px;
      margin-left: 25px;
    }
  </style>
</head>
<body>
  <input type="text" id="add" placeholder="请输入要添加的列表项" onfocus="miss();">
  <button type="button" onclick="addList();">动态生成列表项</button><br/>
  <span id="warring"></span>
  <ul id="ul">
    <li>传智播客</li>
    <li>黑马程序员</li>
  </ul>
</body>
</html>
<script>
  function addList() {
    if(document.getElementById("add").value == ""){
      //如果输入区的值为空则不能添加列表项
      document.getElementById("warring").innerText = "不能添加空的列表项";
      return;
    }
    let value = document.getElementById("add").value;
    //创建一个li标签
    let li = document.createElement("li");
    li.innerText = value;
    //将该标签挂到ul标签上
    document.getElementById("ul").appendChild(li);
    //清空输入区的值
    document.getElementById("add").value = "";
    //自动聚焦到输入区
    document.getElementById("add").focus();
  }
  //输入区获得焦点取消警告
  function miss() {
    document.getElementById("warring").innerText = "";
  }
  //按下回车相当于按下提交键
  onkeypress = function (){

    if(event.keyCode == 13){
      addList();
    }
  };

</script>